<template>
	<div class="com-cell">
		<p class="title" v-if="!hiddenLabel" :style="{ width: labelWidth }" :class="{required}">
			<slot name="title">
				{{ title }}
			</slot>
		</p>
		<div class="value">
			<slot>
				{{ value }}
			</slot>
		</div>
	</div>
</template>

<script setup lang="ts">
defineProps({
	title: {
		type: String,
		default: ""
	},
	value: {
		type: String,
		default: ""
	},
	labelWidth:{
		type: String,
		default: 'auto'
	},
	required:{
		type: Boolean,
		default: false
	},



	
	hiddenLabel:{
		type: Boolean,
		default: false
	}
});
</script>

<style scoped lang="scss">
.com-cell {
	padding: 8px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	overflow: hidden;
	.title {
		color: #999;
		flex-shrink: 0;
		max-width: 120px;
		word-wrap: break-word;
		display: flex;
		align-items: center;
		gap: 6px;
		line-height: 1;
	}
	.required{
		&::before{
			content: "*";
			display: block;
			color: #F64747;
		}
	}
	.value {
		color: #666;
		flex: 1;
		// overflow: hidden;
	}
}
</style>
